<template>
  <div>
    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="picture">
        <img src="../../images/img_bg_01.png" alt="">
        <span>上医</span>
      </div>
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <ul>
            <li><img src="../../images/img_01.png" alt="">
              <p>李医生</p>
            </li>
            <li><img src="../../images/img_01.png" alt="">
              <p>李医生</p>
            </li>
            <li><img src="../../images/img_01.png" alt="">
              <p>李医生</p>
            </li>
          </ul>

        </div>
        <div class="swiper-slide">
          <ul>
            <li><img src="../../images/img_02.png" alt="">
              <p>月嫂</p>
            </li>
            <li><img src="../../images/img_02.png" alt="">
              <p>月嫂</p>
            </li>
            <li><img src="../../images/img_02.png" alt="">
              <p>月嫂</p>
            </li>
          </ul>
        </div>
        <div class="swiper-slide">
          <ul>
            <li><img src="../../images/img_03.png" alt="">
              <p>管家</p>
            </li>
            <li><img src="../../images/img_03.png" alt="">
              <p>管家</p>
            </li>
            <li><img src="../../images/img_03.png" alt="">
              <p>管家</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

    </div>
  </div>



</template>
<script>
  export default {
    data() {},
    mounted() {
      //因为dom渲染完成才能初始化Swiper，所以必须将初始化放入vue的生命周期钩子函数mounted中
      new Swiper(".swiper-container", {
        pagination: ".swiper-pagination", //分液器
        autoplay: 50000,
        loop: true, //环路
        indicatorDots: false, //是否显示小圆点
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      });
    }
  };
</script>
<style scoped>
  .swiper-container {
    width: 100%;
    height: 150px;
    background-color: #fff;
  }

  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 58%;
    width: 28px;
    height: 15px;
  }

  .swiper-container .picture img {
    width: 100%;
    height: 20px;
  }

  .picture {
    position: relative;
    margin-top: 5px;
    padding: 0 30px;
  }

  .picture span {
    position: absolute;
    top: 0;
    left: 47%;
    color: #fff;
    font-size: 10px;
  }

  ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
    padding: 0 40px;
  }

  .swiper-slide ul li {
    text-align: center;
  }

  .swiper-slide ul li img {
    width: 40px;
    height: 40px;
  }
</style>